<template>
  <div class="addOrEdit">
    <el-dialog
      :before-close="handClose"
      center
      width="50%"
      title="商品信息修改"
      :visible.sync="off"
      append-to-body
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        size="mini"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称:" prop="goodsName">
              <el-input v-model.number="ruleForm.goodsName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品编号:" prop="goodsNum">
              <el-input v-model.number="ruleForm.goodsNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品单价:" prop="price">
              <el-input v-model.number="ruleForm.price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供应商编号:" prop="providerId">
              <el-input v-model.number="ruleForm.providerId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="当前供应商:" prop="providerName">
              <span>{{ruleForm.providerName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品品牌:" prop="brandId">
              <el-select
                v-model="ruleForm.brandId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入商品编号"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option
                  v-for="item in optionsNum"
                  :key="item.brandId"
                  :label="item.brandName"
                  :value="item.brandId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前品牌名称" prop="brand">
              <span>{{ruleForm.brandName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品关键词:" prop="goodsSeoKeywords">
              <el-input v-model.number="ruleForm.goodsSeoKeywords"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类:" prop="catId">
              <el-cascader
                :change-on-select="true"
                :show-all-levels="false"
                :clearable="true"
                :props="{children: 'list',label: 'catName',value: 'catId'}"
                placeholder="按分类筛选"
                v-model="ruleForm.catId"
                :options="options"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总库存数:" prop="storeNum">
              <el-input v-model.number="ruleForm.storeNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="低库存数:" prop="lowWarnStock">
              <el-input v-model.number="ruleForm.lowWarnStock"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品规格:" prop="specifications">
              <el-input v-model.number="ruleForm.specifications"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存备注:" prop="catName">
              <span>{{ruleForm.notes}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品详情图" prop="shPosition">
              <el-upload
                ref="upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload"
                :on-error="error"
                class="avatar-uploader"
                accept="image/*"
                action="http://192.168.1.68:18082/user/upload/image"
                list-type="picture-card"
              >
                <div style="height:100%;position:relative">
                  <img
                    style="z-index:2;position:relative;"
                    width="100%"
                    height="100%"
                    :src="ruleForm.goodsImg"
                    alt
                  />
                  <i
                    class="el-icon-plus"
                    style="z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"
                  ></i>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品缩略图" prop="shPosition">
              <el-upload
                ref="upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
                :on-error="error"
                class="avatar-uploader"
                accept="image/*"
                action="http://192.168.1.68:18082/user/upload/image"
                list-type="picture-card"
              >
                <div style="height:100%;position:relative">
                  <img
                    style="z-index:2;position:relative;"
                    width="100%"
                    height="100%"
                    :src="ruleForm.thumbnail"
                    alt
                  />
                  <i
                    class="el-icon-plus"
                    style="z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"
                  ></i>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品描述:" prop="catName">
              <el-input v-model.number="ruleForm.catName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="create">立即创建</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGoodsKindList, findBrandByName, editKind } from "@/api/jxc/goods.js";
export default {
  name: "goodsInfoEdit",
  props: {
    off: {
      type: Boolean
    },
    rowData: {
      type: Object
    },
    title: {
      type: String
    }
  },
  watch: {
    off(val) {
      if (val) {
        this.$nextTick(() => {
          getGoodsKindList().then(
            res => {
              console.log("商品分类级联res", res);
              this.options = res.data;
            },
            err => {}
          );
        //   this.ruleForm = this.rowData;
          this.ruleForm.storeNum = this.rowData.goodsStock.storeNum;
          this.ruleForm.lowWarnStock = this.rowData.goodsStock.lowWarnStock;
          this.ruleForm.providerName = this.rowData.provider.providerName;
          this.ruleForm.brandName = this.rowData.brand.brandName;
        });
      }
    }
  },
  data() {
    return {
        optionsNum: [],
      loading: false,
      options: [],
      retainTime: [
        { label: "30分钟", value: "30分钟" },
        { label: "一天", value: "1天" },
        { label: "二天", value: "2天" }
      ],
      rules: {
        notes: [{ required: true, message: "仓位不能为空", trigger: "blur" }],
        shAddress: [
          { required: true, message: "地址不能为空", trigger: "change" }
        ]
      },
      ruleForm: {
        goodsName: "",
        goodsNum: "",
        price: "",
        providerId: "",
        catName: "",
        goodsSeoKeywords: "",
        storeNum: "",
        specifications: "",
        notes: "",
        goodsImg: "",
        catId: "",
        thumbnail: "",
      }
    };
  },
  methods: {
       remoteMethod(query) {
      if (query !== "") {
        this.ruleForm.brandId = query;
        this.loading = true;
        findBrandByName({
          currentPage: 1,
          pageSize: 10,
          brandName: query
        }).then(
          res => {
            this.optionsNum = res.data.list;
            console.log("this.options", this.optionsNum)
            this.loading = false;
          },
          err => {}
        );
      } else {
        this.optionsNum = [];
      }
    },
    handleChange(row) {
      console.log("----------");
      console.log("row", row);
      this.ruleForm.catId = row[row.length - 1];
    },
    error(err, file, fileList) {
      console.log(err, file, fileList);
    },
    handleAvatarSuccess1(res, file) {
      console.log("上传成功res", res);
      console.log("上传成功file", file);
      this.ruleForm.thumbnail = res.data;
      this.isImg = true;
    },
     handleAvatarSuccess2(res, file) {
      console.log("上传成功res", res);
      console.log("上传成功file", file);
      this.ruleForm.goodsImg = res.data;
      this.isImg = true;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    },
    findItemByTypeName(arr, typeName) {
      var item = "";
      arr.forEach(e => {
        if (typeName == e.typeName) {
          item = e;
        } else {
          this.findItemByTypeName(e.list, typeName);
        }
      });
      return item;
    },
    changeSort() {},
    handClose() {
      this.$emit("update:off", false);
      console.log(this.$refs.ruleForm);
      this.ruleForm.imageUrl = "";
      this.$refs.ruleForm.resetFields();
      this.ruleForm.picture = "";
    },
    create() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          return;
        } else {
          if (this.title == "新增分类") {
            addKind(this.ruleForm).then(
              res => {
                console.log("res新增分类成功", res);
                this.$message({
                  type: "success",
                  message: "新增分类成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {}
            );
          } else {
            let obj = this.rowData;
            obj.catName = this.ruleForm.catName;
            obj.picture = this.ruleForm.picture;
            obj.sortNumber = this.ruleForm.sortNumber;
            editKind(obj).then(
              res => {
                console.log("res修改分类成功", res);
                this.$message({
                  type: "success",
                  message: "修改分类成功"
                });
                this.handClose();
                this.$parent.getList();
              },
              err => {
                this.$notify({
                  type: "error",
                  message: err.message
                });
              }
            );
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
/deep/.el-upload--picture-card {
  line-height: 0 !important;
}
</style>